<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>我的订单</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
	<meta content="yes" name="apple-mobile-web-app-capable">     
	<meta content="black" name="apple-mobile-web-app-status-bar-style">     
	<meta content="telephone=no" name="format-detection">
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="stylesheet" href="/H5/css/sm.min.css">
	<link rel="stylesheet" href="/H5/css/reset.css">
	<link rel="stylesheet" href="/H5/css/order.css">
</head>    
<body>
		<div class="page-group ms-controller" :controller="orderlist">
	        <div class="page page-current">
	            <header class="bar bar-nav">
	              	<a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
	              	<a class="icon icon-home pull-right" href="/H5"></a>
	              	<h1 class="title">我的订单</h1>
	            </header>
	            <div style="margin-bottom: 0;top: 2.5rem; position: absolute; width: 100%; z-index: 999999">
	            	<div class="buttons-tab" style="margin-bottom: 0; display: none">
		                <a :on-click="@jump(1,1)" class="tab-link button type1">我的订单</a>
		                <a :on-click="@jump(2,1)" class="tab-link button type2">代付订单</a>
		            </div>
		            <div class="buttons-tab" style="font-size: .5rem" :if="@type==1">
		                <a :on-click="@jump(1,1,0)" :class="@status==0?'tab-link button active':'tab-link button'" style="font-size:.7rem;height: 1.6rem;line-height:1.6rem">待付款</a>
		                <a :on-click="@jump(1,1,1)" :class="@status==1?'tab-link button active':'tab-link button'" style="font-size:.7rem;height: 1.6rem;line-height:1.6rem">已付款</a>
		                <a :on-click="@jump(1,1,2)" :class="@status==2?'tab-link button active':'tab-link button'" style="font-size:.7rem;height: 1.6rem;line-height:1.6rem">发货中</a>
		                <a :on-click="@jump(1,1,3)" :class="@status==3?'tab-link button active':'tab-link button'" style="font-size:.7rem;height: 1.6rem;line-height:1.6rem">已完成</a>
		            </div>
	            </div>
	            <div class="content infinite-scroll infinite-scroll-bottom" data-distance="100" :css="{'top':@type==1?'6rem': '5rem'}">
    				<div class="card card_first" :for="el in orderList">
    	                <div class="card-header">
    	                	<a><span class="order_span" :if="el.order_owner">来自'{{el.order_owner}}'的代付订单</span></a>
    	                    <a :if="!el.order_owner" href="javascript:;" :on-click="@delete(el.order_no)" style="display:block; width:10%; float:right; text-align:center;"><img src="/H5/images/shopTrash.png" height="24px"></a>
    	                </div>
    	                <div class="card-content">
    						<div class="card-content-inner">
    	                    	<a><img :attr="{'src':@el.goods.picture_urls[0]}"/></a>
    	                        <div class="order_right">
    	                        	<p>{{el.goods.title}}</p>
    	                            <h5>{{el.goods.intro||""}}</h5>
    	                            <div class="jifen" :if="el.goods.give_point>0"><span>赠送积分</span>+{{el.goods.give_point*el.buy_num||0}}</div>
    	                            <div class="jifen" :if="el.goods.deviation_point>0"><span>抵扣积分</span>-{{el.goods.deviation_point*el.buy_num||0}}</div>
    	                        </div>
    	                    </div>
    	                </div>
    					<div class="card-footer"><span :if="el.order_status==0">共{{el.buy_num}}件商品,待付<b style="color:red; font-size:1em;">￥{{el.pay_money}}</b></span><span :if="el.order_status!=0">共{{el.buy_num}}件商品,￥{{el.pay_money}}元</span><span :if="el.order_friend_status" style="text-align: right;color: red">{{el.order_friend_status||""}}</span><a :if="el.order_status==0&&!el.order_owner" :attr="{'href': '/H5/pay?orderId='+el.order_no}" >立即付款</a><a :if="el.order_status==0&&el.order_owner" href="javascript:;" :on-click="@fPay(el.order_no)" >立即付款</a><a :if="el.order_status==1" href="javascript:;" >{{el.order_status_label}}</a></div>
    				</div>
	                <div :if="@more" class="infinite-scroll-preloader">
		                <div class="preloader"></div>
		            </div>
	            </div>
	        </div>
	    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/mall.js' charset='utf-8'></script>
    <script>
		var orderlist = avalon.define({
		    $id: "orderlist",
		    type: 1, 
		    loading: false,
		    more: false,
		    page_num: 1,
		    page_size: 3,
		    status: 0,
		    orderList:[],
		    getOrderList: function( a, t, o ){
		    	var url;
		        if( a == "my" ){
		        	url = "/api/OrderList"
		        }
		        if( a == "df" ){
		        	url = "/api/OrderFriendList"
		        }
		        if( typeof t !== "undefined" ){
		        	var postData = {
		        		order_status: t,
		        		page_num: orderlist.page_num, 
		        		page_size: orderlist.page_size
		        	}
		        }
		        else{
		        	var postData = {
		        		page_num: orderlist.page_num, 
		        		page_size: orderlist.page_size
		        	};
		        }
		        if( o && orderlist.loading ){
		        	return
		        }
		        orderlist.loading = true;
		        Mall.request( url, postData )
		        	.always( function( data ){
		        		if( data.error_code == 0 ){
	        				if( orderlist.page_num == data.data.page_total ){
	        					orderlist.more = false;
	        				}
	        				else{
	        					if( data.data.list.length == 0 ){
	        						orderlist.more = false;
	        					}
	        					else{
	        						orderlist.more = true;
	        					}
	        				}
        					if( o ){
        				    	orderlist.orderList = orderlist.orderList.concat( data.data.list );
        					}
        					else{
        						orderlist.orderList = data.data.list;
        					}
        					orderlist.page_num ++;
		        		}
		        		else{
		        		    $.alert(data.error_msg);
		        		}
		        		orderlist.loading = false;
		        	} )
		    },
            jump: function( e, o, s ){
            	if( e ){
            		orderlist.page_num = 1;
            		orderlist.orderList = [];
            		orderlist.more = false;
            		if( typeof s !== "undefined" ){
            			orderlist.status = s;
            			orderlist.getOrderList( "my", orderlist.status );
            		}
            		else{
            			if( e == 2 ){
            				orderlist.getOrderList( "df" );
            			}
            			else{
            				orderlist.getOrderList( "my", 0 );
            			}
            		}
            		if( !$( "a.type"+e ).hasClass( "active" ) ){
    	        		$( "a.type"+e ).siblings().removeClass( "active" );
    	        		$( "a.type"+e ).addClass( "active" );
    	        		if( o ){
    	        			var url;
    	        			if( s ){
    	        				url = window.location.href.split("&status=")[0]+"&status="+s;
    	        			}
    	        			url = window.location.href.split("?type=")[0]+"?type="+e;
    	        			window.history.replaceState(null, null, url); 
    	        		}
            		}
            		orderlist.type = e;
            	}
            },
		    delete: function( id ){
		    	$.confirm("确定要删除订单吗?", function(){
		    		Mall.request( "/api/OrderRemove", {order_no: id} )
		    			.always( function( data ){
		    				if( data.error_code == 0 ){
		    				    $.toast( "删除成功", 1000, "success", function(){
		    				        window.location.reload();
		    				    } )
		    				}
		    				else{
		    				    $.alert(data.error_msg);
		    				}
		    			} )
		    	})
		    },
		    fPay: function( id ){
		    	$.prompt("请输入支付密码", function( value ){
		    		var postData = {
		    			order_no: id,
		    			pay_type: 1,
		    			pay_password: value
		    		}
		    		Mall.request( "/api/OrderPay", postData )
		    			.always( function( data ){
		    				if( data.error_code == 0 ){
		    					$.alert( "代付成功", function(){
		    						orderlist.getOrderList( "df" );
		    					} )
		    				}
		    				else{
		    					$.alert(data.error_msg);
		    				}
		    			} )
		    	})
		    	$( "input.modal-text-input" ).attr( "type", "password" );
		    },
		    infinite: function(){
		    	$(document).on('infinite', '.infinite-scroll-bottom',function() {
		    		if( orderlist.more ){
		    			if( orderlist.type == 1 ){
		    				orderlist.getOrderList( "my", orderlist.status, true );
		    			}
		    			else{
		    				orderlist.getOrderList( "df", 0, true );
		    			}
		    		}
		    	});
		    	$.init();
		    }
		})
		var params = Mall.parseUrl( window.location.href );
		if(params.status){
			orderlist.jump( 1, 0, params.status );
		}
		else{
			orderlist.jump( Mall.parseUrl( window.location.href ).type );
		}
		orderlist.infinite();
		avalon.scan( document.body );
    </script>
</body>
</html>
